<template>
  <div id="root">
    <div id="ro">
      <span class="span-one fa fa-chevron-left" @touchstart="backClick"></span>
      <div id="ro-div">
          <span class="fa fa-search"></span>
          <input type="text" v-model="search" @input="timeShowBtn" ref="active" placeholder="城市名/景点名/主题">
          <span class="fa fa-times-circle" v-show="timesShow" @touchstart="clearBtn"></span>
      </div>
      <router-link :to="'/my/search/viewlisttwo/'+search" v-show="!search==''">
        <span>搜索</span>
      </router-link>

      <div id="more" :class="{'disappear':search==''}">
        <router-link  v-for="a in arr" :to="'/my/detail/'+a._id" :key="a._id">
          <div>
            {{a.name}}
            <span class="fa fa-reply"></span>
          </div>
        </router-link>
        <div v-show="arr==''">没有相关搜索项</div>
      </div>


    </div>
    <p>大家都在搜</p>
    <div id="words">
      <span>定安文笔峰</span>
      <span>保亭呀诺达热带雨林</span>
      <span>陵水分界洲岛</span>
      <span>冯小刚电影公社</span>
      <span>三亚天涯海角</span>
    </div>
    <p>历史搜索记录</p>
    <div class="history-item">郑州</div>
    <div class="history-item">北京</div>

    <div id="clear">
      <span class="fa fa-trash"></span>
      <span>清除搜索历史</span>
    </div>
  </div>
</template>

<script>



import BottomBar from '../components/BottomBar.vue';
import NavBar from '../components/NavBar.vue';

export default {
  data:function(){
    return {
     search:"",
     timesShow:false,
     arr:[]
    }
  },
  components:{
   
  },
  computed:{
    
  },
  methods:{
    backClick:function(){
      this.$store.commit("backPath");
    },
    timeShowBtn:function(){
      if(this.search!=""){
          this.timesShow = true;
      }else{
        this.timesShow = false;
      };
      this.http.post("/api/search",{txt:this.search})
      .then(res=>{
        this.arr = res.data.msg;
      });

    },
    clearBtn:function(){
      this.search = "";
      this.timesShow = false;
    },
  },
  mounted:function(){
    // console.log(this.$refs.active);
    this.$refs.active.focus();
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #root{
    width:100vw;
    height:100vh;
    background-color:#F8F8F8;
  }
  #ro{
    height:40px;
    background:linear-gradient(to right,#F34B4A,#FF8B88);
    padding:0 19px 0 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  #ro>span:nth-of-type(1){
    font-size: 18px;
    color:white;
  }
  #ro>a{
    font-size:13px;
    color:white;
    text-decoration:underline;
  }
  #ro-div{
    height:28px;
    margin:0 20px 0 40px;
    flex-grow:1;
    background-color:white;
    border:solid 1px #dedede;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  #ro-div span:nth-of-type(1){
    color:#dedede;
    font-size:17px;
    margin-left:8px;
  }
  #ro-div span:nth-of-type(2){
    margin-right:8px;
    color:#BFBFBF;
    font-size:18px;
  }
  #ro-div input{
    flex-grow:1;
    margin:0 4px;
    border:none;
  }
  #root>p{
    margin:0;
    background-color:white;
    font-size:11px;
    color:#bcbcbc;
    height:27px;
    line-height:27px;
    border:1px solid #dedede;
    padding:0px 10px;
  }
  #words{
    background-color:#fbfcfd;
    width: 100%;
    padding-bottom:15px;
    margin-bottom:15px;
    border-bottom:1px solid #dedede;
    padding-left:7px;
  }
  #words span{
    display:inline-block;
    padding: 6px 15px;
    font-size: 12px;
    color: #666;
    border: 1px solid #ffbbba;
    border-radius: 20px;
    margin:15px 5px 0 0;
  }
  .history-item{
    padding: 14px 0 14px 20px;
    font-size: 12px;
    color: #666;
    border-bottom: 1px solid #dedede;
    background: #fbfcfd;
  }
  #clear{
    width: 100%;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    color: #9b9b9b;
    background: #fcfcfc;
    border-bottom: 1px solid #dedede;
  }
  #more{
    position:absolute;
    background-color:rgba(0,0,0,0.5);
    z-index:10;
    top:44px;
    left:0;
    width:100%;
    height:calc(100vh - 44px);
  }
  .disappear{
    display:none;
  }
   #more div{
    background-color:#FBFCFD;
    font-size:13px;
    display:flex;
    justify-content:space-between;
    padding:10px 15px;
    align-items:center;
    border-bottom:solid 1px #dedede;
    color:#666;
  }
  #more div span{
    font-size:13px !important;
    color:#B6B6B6;
  }
  a{
    text-decoration:none;
  }
</style>
